<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li {
            list-style:none;
        }
        .box{
            width: 800px;
            height: 500px;
            position: relative;
            margin: 100px auto;
            border: 1px solid #666;
        }
        .screen {
            width: 800px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        .screen ul {
            width: 4800px;
            position: absolute;
            height: 500px;
        }
        .screen ul li {
            float: left;
        }
        .arr {
            display:none;
        }
        .left {
            position: absolute;
            left: 10px;
            top: 40%;
        }
        .right {
            position: absolute;
            right: 10px;
            top: 40%;
        }
        ol {
            position: absolute;
            left: 50%;
            top: 470px;
            transform: translate(-50%,0)
        }
        ol li {
            float:left;
            margin-right: 10px;
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="screen">
            <ul>
                <li><img src="slidepic1.jpg" alt=""></li>
                <li><img src="slidepic2.jpg" alt=""></li>
                <li><img src="slidepic3.jpg" alt=""></li>
                <li><img src="slidepic4.jpg" alt=""></li>
                <li><img src="slidepic5.jpg" alt=""></li>
            </ul>
            <ol></ol>
        </div>
        <div class="arr">
            <div class="left"><img src="prev.png" alt=""></div>
            <div class="right"><img src="next.png" alt=""></div>
        </div>
    </div>
</body>
<script src='../common.js'></script>
<script>
    //获取元素
    var box = document.querySelector('.box');
    var ul = document.querySelector('.screen ul');
    var ol = document.querySelector('.screen ol');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var arr = document.querySelector('.arr');

    //生成小圆点
    for(var i = 0 ; i < ul.children.length; i++){
        var li = document.createElement('li');
        ol.appendChild(li);
    }
    ol.children[0].style.backgroundColor = 'red'
    //注册事件
    //移入移出box,箭头显示消失
    box.onmouseenter = function(){
        arr.style.display = 'block';
        clearInterval(timeID)
    }
    box.onmouseleave = function(){
        arr.style.display = '';
        timeID = setInterval(function(){
            right.click()
        },1000)
    }
    var index = 0;
    var liClone = ul.firstElementChild.cloneNode(true)
    ul.appendChild(liClone)
    //点击右箭头
    right.onclick = function(){
        if(index == ul.children.length - 1){
            ul.style.left = 0;
            index = 0
        }
        index++;
        for(var i = 0; i < ol.children.length; i++){
            if(index == ul.children.length - 1){
                ol.children[0].style.backgroundColor = 'red';
                for(var i = 1; i < ol.children.length; i++){
                    ol.children[i].style.backgroundColor = '';
                }
            }else if(index == i){
                ol.children[i].style.backgroundColor = 'red';
            }else{
                ol.children[i].style.backgroundColor = '';
            }
        }
        animationAll(ul,{left:-index*box.clientWidth})
    }
    //点击左箭头
    left.onclick = function(){
        if(index == 0){
            ul.style.left = -(ul.offsetWidth - box.clientWidth)+'px';
            index = ul.children.length - 1
        }
        index--;
        for(var i = 0; i < ol.children.length; i++){
            if(index == ul.children.length - 1){
                ol.children[0].style.backgroundColor = 'red';
                for(var i = 1; i < ol.children.length; i++){
                    ol.children[i].style.backgroundColor = '';
                }
            }else if(index == i){
                ol.children[i].style.backgroundColor = 'red';
            }else{
                ol.children[i].style.backgroundColor = '';
            }
        }
        animationAll(ul,{left:-index*box.clientWidth})
    }
    //点击小圆点,滚动到对应图片
    for(var i = 0; i < ol.children.length; i++){
        ol.children[i].onclick = olliClick
    }
    function olliClick(){
        if(ul.offsetLeft == -(ul.offsetWidth - box.clientWidth)){
            ul.style.left = 0
        }
        for(var i = 0; i < ol.children.length; i++) {
            this.style.backgroundColor = 'red'
            if(ol.children[i] != this){
                ol.children[i].style.backgroundColor = ''
            }else {
                index = i
            }
            animationAll(ul,{left:-index*box.clientWidth})
        }
    }
    var timeID = setInterval(function(){
        right.click()
    },1000)
</script>
<script src="../jquery-1.12.4.js"></script>
<script>
    // $(function(){
    //     $('.screen ul li').each(function(index,ele){
    //         $('<li></li>').appendTo($('.screen ol'))
    //     })
    //     $('ol li').first().css('backgroundColor','red')
    //     $('.box').on('mouseenter',function(){
    //         $('.arr').show()
    //         clearInterval(timeID);
    //     }).on('mouseleave',function(){
    //         $('.arr').hide()
    //         timeID = setInterval(function(){
    //             $('.right').trigger('click');
    //         },1000)
    //     })
    //     var index = 0;
    //     $('.screen ul li').first().clone().appendTo($('.screen ul'))
    //     $('.right').on('click',function(){
    //         if(index == $('.screen ul li').length - 1){
    //             $('.screen ul').get(0).style.left = 0
    //             index = 0
    //         }
    //         index++
    //         $('ol li').eq(index).css('backgroundColor','red').siblings().css('backgroundColor','')
    //         $('.screen ul').stop().animate({left:-index*$('.box').width()})
    //         if(index == $('.screen ul li').length - 1){
    //             $('ol li').eq(0).css('backgroundColor','red').siblings().css('backgroundColor','')
    //         }
    //     })
    //     $('.left').on('click',function(){
    //         if(index == 0 ){
    //             $('.screen ul').get(0).style.left = -($('.screen ul').width()-$('.box').width())+'px'
    //             index = $('.screen ul li').length-1
    //         }
    //         index--
    //         $('ol li').eq(index).css('backgroundColor','red').siblings().css('backgroundColor','')
    //         $('.screen ul').stop().animate({left:-index*$('.box').width()})
    //     })
    //     $('ol li').on('click',function(){
    //         if(index == $('.screen ul li').length - 1){
    //             $('.screen ul').get(0).style.left = 0;
    //         }
    //         index = $(this).index();
    //         $(this).css('backgroundColor','red').siblings().css('backgroundColor','')
    //         $('.screen ul').stop().animate({left:-$(this).index()*$('.box').width()})
    //     })
    //     var timeID = setInterval(function(){
    //         $('.right').trigger('click');
    //     },1000)
    // })
</script>
</html>